<!--
* 名称：index
* 描述：xx
* 码农：一笑痕
* 创建时间：2023/12/10 0010
-->

<template>
  <div class="app-container indexContainer">
    <ul>
      <li v-for="item in content" :key="item.id">
        <span>{{ item.name }}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>

  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {CardAddData, CardDeleteData, CardSelectData,} from "../indexedDB/index/index.ts";

let content = ref()
const del = (id) => {
  CardDeleteData(id).then(res => {
    selectData()
  })
}

function selectData() {
  //  分页查询
  CardSelectData(1, 10).then(res => {
    content.value = res
  })
}

onMounted(() => {
  // 分页查询数据
  selectData()

  // 添加数据
  CardAddData(
      {
        id: new Date().getTime(),
        name: '张' + new Date().getTime(),
        age: Math.round(Math.random() * 20),
        card: '身份证' + Math.round(Math.random() * 100),
        price: Math.round(Math.random() * 1000)
      }
  ).then(res => {

  })

  // CardUpdateData(
  //     {
  //       id: 1702220305848,
  //       name: '李四4',
  //     }
  // ).then(res => {
  //
  // })


})

onUnmounted(() => {

})
</script>
<script>
export default {
  name: 'index'
}
</script>

<style scoped>
.indexContainer {
  margin-left: 10px;
  background-color: lightgreen;
  height: 100%;
}
</style>
